import React from 'react';

interface BreadcrumbItem {
  id: string;
  title: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
  activeItemId: string;
}

const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, activeItemId }) => {
  return (
    <nav className="breadcrumb" aria-label="breadcrumb">
      <ol className="breadcrumb-list">
        {items.map((item, index) => {
          const isActive = item.id === activeItemId;
          return (
            <li key={item.id} className={`breadcrumb-item ${isActive ? 'active' : ''}`}>
              {!isActive && index > 0 && (
                <span className="breadcrumb-separator">/</span>
              )}
              {isActive ? (
                <span className="breadcrumb-text">{item.title}</span>
              ) : (
                <span className="breadcrumb-text">{item.title}</span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumb;